<template>
	<view class="SRV-showmod">
		<view :class="'modshow '+ modcss" :style="'width: ' + getpx(size) +'px; height:' + getpx(size) +'px; border-radius: '+ radius +'%;'">
			<view class="image" v-for="(imgItem,index) in imgList.slice(0, modcount)" :key="index">
				<image class="imagesrc" :src="imgItem.imgUrl" mode="aspectFill" v-if="imgItem.imgUrl!=''" />
			</view>
			<view class="piccount">{{talImgnum}} </view>
		</view>
		
		
		
	</view>
</template>

<script>
	export default {
		name:"SRV-showmod",
		props: {
			size: {
					//元件大小
					type: [Number, String],
					default: 300
				},
			radius: {
					//圆角百分值
					type: [Number, String],
					default: 3
				},
			modcss: {
				// 封面样式
				type: String,
				default: "modshow1"
			},
			modcount: {
					//封面图片数
					type: [Number, String],
					default: 1
				},
			talImgnum: {
					//总图片数量
					type: [Number, String],
					default: 1
				},
			imgList: {
				//图片地址数组
				type: [Array, String],
				efault: []
			}
			
		},
		
		methods: {
			getpx(x){// 计算 upx to px
				return uni.upx2px(x);
			},
		}
		
	}
</script>

<style lang="scss">
	.SRV-showmod {
		$srv-border-size:8upx;
		$srv-border-half:4upx;
		
		
		.modshow{
			
			
			
			display: flex;
			direction: row;
			flex-wrap: wrap;
			position: relative;
			justify-content: space-between;
			
			
			overflow: hidden;
			background-color: #fff;
			//border: $srv-border-size #fff solid;
			//box-shadow: 0px 0px 10px 0px rgba(#333, 0.2);
			
			
			.image {
				background-color: #ccc;
				border-radius: 2%;
				overflow: hidden;
				}
		}
		
		.piccount {
			position: absolute;
			bottom: 10upx;
			right: 10upx;
			text-align: right;
			color: #fff;
			font-size: 80upx;
			line-height: 80upx;
			font-weight: 100;
			text-shadow: 0px 0px 5px 0px rgba(#000, 0.8);
		}
		            				
		.imagesrc {
			width: 100%;
			height: 100%;
		}
		
		.modshow1 {
			flex-direction: row;
			.image {
				width: 100%;
				height: 100%;
			}
		}
		            				
		.modshow2 {
			flex-direction: column;
			.image {
				width: 100%;
				height: calc(50% - 4upx);
			}
			.image:nth-child(1) {
				width: 100%;
				margin-bottom: $srv-border-size;
			}
		}
		            				
		.modshow3 {
			flex-direction: row;
			.image {
				width: calc(50% - 4upx);
				height: 100%;
			}
			.image:nth-child(1) {
				height: 100%;
				margin-right: $srv-border-size;
			}
		}
		            				
		.modshow4 {
			flex-direction: row;
			.image:nth-child(1) {
				width: 100%;
				margin-bottom: $srv-border-size;
			}
			.image:nth-child(3) {
				margin-left: $srv-border-size;
			}
			.image {
				width: calc(50% - 4upx);
				height: calc(50% - 4upx);
			}
		}
		            				
		.modshow5 {
			flex-direction: row;
			.image {
				width: calc(50% - 4upx);
				height: calc(50% - 4upx);
			}
			.image:nth-child(1) {
				margin-right: $srv-border-size;
			}
			.image:nth-child(3) {
				width: 100%;
				margin-top: $srv-border-size;
			}
		}
		            				
		.modshow6 {
			flex-direction: column;
			.image {
				width: calc(50% - 4upx);
				height: calc(50% - 4upx);
			}
			.image:nth-child(1) {
				height: 100%;
				margin-right: $srv-border-size;
			}
			.image:nth-child(3) {
				margin-top: $srv-border-size;
			}
		}
		            				
		.modshow7 {
			flex-direction: column;
			.image {
				width: calc(50% - 4upx);
				height: calc(50% - 4upx);
			}
			.image:nth-child(2) {
				margin-top: $srv-border-size;
			}
			.image:nth-child(3) {
		            				
				height: 100%;
				margin-left: $srv-border-size;
			}
		}
		            				
		.modshow8 {
			flex-direction: row;
			.image {
				width: calc(50% - 4upx);
				height: calc(50% - 4upx);
			}
			.image:nth-child(1) {
				margin-right: $srv-border-size;
				margin-bottom: $srv-border-size;
			}
			.image:nth-child(2) {
				margin-bottom: $srv-border-size;
			}
			.image:nth-child(3) {
				margin-right: $srv-border-size;
			}
		}
		            				
		.modshow9 {
			flex-direction: row;
			.image {
				width: calc(50% - 4upx);
				height: calc(50% - 4upx);
			}
			.image:nth-child(1) {
				margin-right: $srv-border-size;
				margin-bottom: $srv-border-size;
			}
			.image:nth-child(2) {
				margin-bottom: $srv-border-size;
			}
			.image:nth-child(3) {
				margin-right: $srv-border-size;
			}
			.image:nth-child(5) {
				width: 40%;
				height: 40%;
				position: absolute;
				top: calc(30% - 4upx);
				left: calc(30% - 4upx);
				border: $srv-border-size #fff solid;
				border-radius: 50%;
				overflow: hidden;
			}
		}
		            					
		
		
		
	}

</style>
